<template>
        <div class="mv-item" @click="clickItem">
            <div class="mv-item-img">
                <img :src="showImage">
                <p class="playCount">{{showplayCount}}</p>
            </div>
            <div class="language">
                <p class="language-title">{{mvsItem.name}}</p>
                <p class="language-artisName">{{mvsItem.artistName}}</p>
            </div>
        </div>
</template>

<script>
    export default {
        name: "IndexMvListItem",
        props:{
            mvsItem:{
                type:Object,
                default(){
                    return{}
                }
            }
        },
        computed:{
            showImage(){
                return this.mvsItem.cover
            },
            showplayCount(){
                return this.testPlayCount(this.mvsItem.playCount);
            }
        },
        methods:{
            testPlayCount(playCount){
                if(playCount*1>10000){
                    var i=playCount/10000
                    return i.toFixed(1)+"万";
                }else {
                    return playCount;
                }
            },
            clickItem(){
                // console.log(this.mvsItem.id);
                this.$router.push('/detail/'+this.mvsItem.id)
            }
        }
    }
</script>

<style scoped>
    .mv-item{
        padding-bottom: 20px;
        position: relative;
        width: 48%;
        margin-bottom: 2px;
    }
    .mv-item-img{
        width: 100%;
        height: 98px;
    }
    .mv-item-img img{
     width: 100%;
    }
    .playCount{
        color: #f6f6f6;
        z-index: 10;
        position: relative;
        left: 68%;
        bottom: 85px;
        font-size: 11px;
    }
    .language{
        width: 100%;
    }
    .language-title{
        margin-left: 3px;
        margin-top: 0;
        max-width: 100%;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;  /* 不允许换行 */
        overflow: hidden;  /* 隐藏 */
        text-overflow:ellipsis;
    }
    .language-artisName{
        margin-left: 3px;
        font-size: 9px;
    }
</style>